<template>
  <div id="root">
    <!-- head -->
    <header>
      <fakeInput v-if="active === 0"></fakeInput>
      <van-nav-bar
        v-if="active != 0"
        fixed
        :placeholder="placeholder"
        v-show="navBarShow"
        :border="border"
        @click-right="searchHander"
      >
        <template #title>
          <span v-if="active === 1"> 分类 </span>
          <span v-if="active === 2"> 消息 </span>
          <span v-if="active === 3"> 购物车 </span>
          <span v-if="active === 4"> 我的 </span>
        </template>
        <template v-if="active === 1" #right >
          <span class="yo-ico">&#xe617;</span>
        </template>
      </van-nav-bar>
    </header>

    <!-- body -->
    <main>
      <router-view @mine="scrollHandler"></router-view>
    </main>

    <!-- foot -->
    <footer>
      <div class="vant">
        <van-tabbar v-model="active" @change="clickhander">
          <van-tabbar-item v-for="(tab, index) in navTabs" :key="index">
            <span>{{ tab.name }}</span>
            <template #icon>
              <i class="yo-ico" v-html="tab.font"></i>
            </template>
          </van-tabbar-item>
        </van-tabbar>
      </div>
    </footer>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem, NavBar, Icon } from "vant";

Vue.use(Icon);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(NavBar);

import fakeInput from "./Home/fake-input";
import { mapActions } from "vuex";
export default {
  components: {
    fakeInput,
  },
  data() {
    return {
      placeholder: true,
      navBarShow: true,
      active: 0,
      border: false,
      icon: {
        active: "https://img01.yzcdn.cn/vant/user-active.png",
        inactive: "https://img01.yzcdn.cn/vant/user-inactive.png",
      },
      navTabs: [
        {
          name: "首页",
          font: "&#xe658",
        },
        {
          name: "分类",
          font: "&#xe679;",
        },
        {
          name: "消息",
          font: "&#xe624;",
        },
        {
          name: "购物车",
          font: "&#xe607;",
        },
        {
          name: "我的",
          font: "&#xe603;",
        },
      ],
    };
  },
  watch: {
    active() {
      if (this.active === 1 || this.active === 2) {
        this.border = true;
      } else {
        this.border = false;
      }
      if (this.active === 4) {
        this.navBarShow = false;
        this.placeholder = false;
      } else {
        this.navBarShow = true;
        this.placeholder = true;
      }
    },
  },
  mounted(){
    this.active = this.$store.state.navState
  },
  methods: {
    ...mapActions(["setNavIndex"]),
    scrollHandler(state) {
      this.navBarShow = !state;
    },
    clickhander(index) {
      this.setNavIndex(index);
      if (index === 0) this.$router.push("/index/home");
      else if (index === 1) this.$router.push("/index/classification");
      else if (index === 2) this.$router.push("/index/cart");
      else if (index === 3) this.$router.push("/index/news");
      else if (index === 4) this.$router.push("/index/mine");
    },
    searchHander(){
      this.$router.push({path:'/search'})
    }
  },
};
</script>

<style lang="stylus" scoped>
#root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  overflow-y: scroll;
}

footer {
  width: 100%;
  height: 0.44rem;

  // z-index 999
  div {
    height: 0.44rem;
  }
}

ul {
  height: 0.44rem;
  background-color: white;
  display: flex;
}

ul>li {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

ul>li>span {
  font-size: 0.13rem;
}

ul li>i {
  box-sizing: border-box;
  padding-top: 0.03rem;
  width: 0.15rem;
  font-weight: 100;
  font-size: 0.1rem;
}

ul li>.name {
  margin-top: -0.05rem;
  display: inline-block;
  font-size: 0.12rem;
  transform: scale(0.8);
}

.active {
  color: rgb(102, 110, 232);
}

.van-nav-bar__right {
  span {
    font-size: 0.18rem;
    font-weight: 700;
  }
}
</style>